<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <div>
        <!-- 搜索表单 -->
        <user-search
          v-if="searchData.length > 0"
          :searchData="searchData"
          @search="reload"
        />

        <div>
          <div class="padding-y-15 fs-14 fw-bolder">新品销售</div>
          <vxe-table
            border
            ref="xTable1"
            align="center"
            show-overflow
            :column-config="{ resizable: true }"
            :data="[info.first, info.second]"
          >
            <vxe-column type="seq" title="序号" width="100" />
            <vxe-column field="name" title="项目名称" width="150" />
            <vxe-column field="count" title="单据数" width="150" />
            <vxe-column field="num" title="数量" width="150" />
            <vxe-column field="gold_weight" title="金重" width="150" />
            <vxe-column field="piece_weight" title="货重" width="150" />
            <vxe-column field="sticker_price" title="标签价" width="150" />
            <vxe-column field="original_amount" title="原售价" width="150" />
            <vxe-column field="real_amount" title="实售金额" width="150" />
            <vxe-column field="pay_amount" title="实收金额" width="150" />
          </vxe-table>
        </div>
        <div>
          <div class="padding-y-15 fs-14 fw-bolder">新品退换</div>
          <vxe-table
            border
            ref="xTable2"
            align="center"
            show-overflow
            :column-config="{ resizable: true }"
            :data="[info.third, info.fourth]"
          >
            <vxe-column type="seq" title="序号" width="100" />
            <vxe-column field="name" title="项目名称" width="150" />
            <vxe-column field="count" title="单据数" width="150" />
            <vxe-column field="num" title="数量" width="150" />
            <vxe-column field="gold_weight" title="金重" width="150" />
            <vxe-column field="piece_weight" title="货重" width="150" />
            <vxe-column field="sticker_price" title="标签价" width="150" />
            <vxe-column field="original_amount" title="原售价" width="150" />
            <vxe-column field="real_amount" title="实售金额" width="150" />
            <vxe-column field="pay_amount" title="实收金额" width="150" />
          </vxe-table>
        </div>
        <div>
          <div class="padding-y-15 fs-14 fw-bolder">旧货退换</div>
          <vxe-table
            border
            ref="xTable3"
            align="center"
            show-overflow
            :column-config="{ resizable: true }"
            :data="[info.fifth, info.sixth]"
          >
            <vxe-column type="seq" title="序号" width="100" />
            <vxe-column field="name" title="项目名称" width="150" />
            <vxe-column field="count" title="单据数" width="150" />
            <vxe-column field="num" title="数量" width="150" />
            <vxe-column field="gold_weight" title="金重" width="150" />
            <vxe-column field="piece_weight" title="货重" width="150" />
            <vxe-column field="sticker_price" title="标签价" width="150" />
            <vxe-column field="real_amount" title="应抵金额" width="150" />
            <vxe-column field="pay_amount" title="实抵金额" width="150" />
            <vxe-column field="pay_amount" title="实收金额" width="150" />
          </vxe-table>
        </div>
        <div>
          <div class="padding-y-15 fs-14 fw-bolder">旧货回收</div>
          <vxe-table
            border
            ref="xTable4"
            align="center"
            show-overflow
            :column-config="{ resizable: true }"
            :data="[info.seven]"
          >
            <vxe-column type="seq" title="序号" width="100" />
            <vxe-column field="name" title="项目名称" width="150" />
            <vxe-column field="count" title="单据数" width="150" />
            <vxe-column field="num" title="数量" width="150" />
            <vxe-column field="gold_weight" title="金重" width="150" />
            <vxe-column field="piece_weight" title="货重" width="150" />
            <vxe-column field="sticker_price" title="标签价" width="150" />
            <vxe-column field="original_amount" title="原售价" width="150" />
            <vxe-column field="pay_amount" title="回收金额" width="150" />
          </vxe-table>
        </div>
        <div>
          <div class="padding-y-15 fs-14 fw-bolder">储值卡</div>
          <vxe-table
            border
            ref="xTable5"
            align="center"
            show-overflow
            :column-config="{ resizable: true }"
            :data="[info.eight, info.nine]"
          >
            <vxe-column type="seq" title="序号" />
            <vxe-column field="name" title="项目名称" />
            <vxe-column field="count" title="单据数" />
            <vxe-column field="amount" title="金额" />
          </vxe-table>
        </div>
        <div>
          <div class="padding-y-15 fs-14 fw-bolder">维修单</div>
          <vxe-table
            border
            ref="xTable6"
            align="center"
            show-overflow
            :column-config="{ resizable: true }"
            :data="[info.ten]"
          >
            <vxe-column type="seq" title="序号" />
            <vxe-column field="name" title="项目名称" />
            <vxe-column field="count" title="单据数" />
            <vxe-column field="amount" title="实际维修金额" />
          </vxe-table>
        </div>
        <div>
          <div class="padding-y-15 fs-14 fw-bolder">其他收支</div>
          <vxe-table
            border
            ref="xTable7"
            align="center"
            show-overflow
            :column-config="{ resizable: true }"
            :data="[info.eleven, info.twelve]"
          >
            <vxe-column type="seq" title="序号" />
            <vxe-column field="name" title="项目名称" />
            <vxe-column field="count" title="单据数" />
            <vxe-column field="amount" title="金额" />
          </vxe-table>
        </div>
        <div>
          <div class="padding-y-15 fs-14 fw-bolder">结算</div>
          <vxe-table
            border
            ref="xTable8"
            align="center"
            show-overflow
            :column-config="{ resizable: true }"
            :data="[info.settle]"
          >
            <vxe-column field="original_amount" title="原售价" width="150" />
            <vxe-column field="real_amount" title="实售金额" width="150" />
            <vxe-column field="discount_amount" title="抵扣金额" width="150" />
            <vxe-column field="real_amount2" title="实收金额" width="150" />
            <vxe-column field="discount_amount2" title="冲抵金额" width="150" />
            <vxe-column field="pay_amount" title="收款金额" width="150" />
            <vxe-column field="value_recharge" title="定金收款" width="150" />
            <vxe-column field="repair_amount" title="维修收款" width="150" />
            <vxe-column field="refund_amount" title="实退金额" width="150" />
            <vxe-column field="recovery_amount" title="回收金额" width="150" />
            <vxe-column field="out_amount" title="其它支出" width="150" />
            <vxe-column field="in_amount" title="其它收入" width="150" />
            <vxe-column field="total" title="结算金额" width="150" />
          </vxe-table>
        </div>
        <div class="margin-y-30">
          <vxe-table
            border
            ref="xTable9"
            align="center"
            show-overflow
            :column-config="{ resizable: true }"
            :data="list"
          >
            <vxe-column field="name" title="收支" width="150" fixed="left" />
            <vxe-column field="cash" title="现金" width="150" />
            <vxe-column field="wechat" title="微信" width="150" />
            <vxe-column field="alipay" title="支付宝" width="150" />
            <vxe-column field="union" title="银联" width="150" />
            <vxe-column field="earnest_amount" title="储值卡金额" width="150" />
            <vxe-column field="card" title="刷卡" width="150" />
            <vxe-column field="transfer" title="转账" width="150" />
            <vxe-column field="other" title="其它支付" width="150" />
          </vxe-table>
        </div>
      </div>
    </a-card>
  </div>
</template>
<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import { PlusOutlined, UploadOutlined } from '@ant-design/icons-vue';
  import { useRouter } from 'vue-router';
  import UserSearch from '@/components/zbTable/components/user-search.vue';
  import zbTable from '@/components/zbTable/purchasePurchaseIndex.vue';
  import { get_value_card_refund_list } from '@/api/order/value_card_refund';

  import { salesman_list, store_team } from '@/api/order/order/jewelry_order';
  import { get_statistics_list } from '@/api/order/statistics';
  // 是否显示编辑弹窗
  const tableRef = ref(null);
  const router = useRouter();
  const { push } = useRouter();

  const form = reactive({
    page: 1,
    page_size: 10,
    filters: {}
  });
  const form2 = reactive({
    create_start_time: '',
    create_end_time: '',
    salesman_team_code: '',
    make_user_id: ''
  });

  // 表格搜索动态表单
  let searchData = ref([
    {
      label: '开单日期',
      name: 'time1',
      options: [],
      type: 'timerange',
      showTime: 'no'
    },
    {
      label: '销售班组',
      name: 'salesman_team_code',
      options: [],
      type: 'select'
    },
    {
      label: '收银账号',
      name: 'make_user_id',
      options: [],
      type: 'select'
    }
  ]);
  const info = ref({});
  const list = ref([]);

  onMounted(() => {
    store_team().then((res) => {
      console.log('res0000', res);
      res.data.forEach((item) => {
        item.key = item.value;
      });
      searchData.value[1].options = res.data;
    });
    salesman_list().then((res) => {
      res.data.forEach((item) => {
        item.key = item.value;
      });
      searchData.value[2].options = res.data;
    });
    get_statistics_list().then((res) => {
      console.log('res==', res);
      info.value = res;
      info.value.settle.real_amount2 = info.value.settle.real_amount;
      info.value.settle.discount_amount2 = info.value.settle.discount_amount;
      list.value = [];
      ('其他支付');
      list.value.push({
        name: '收款',
        cash: res.shou_cash,
        wechat: res.shou_wechat,
        alipay: res.shou_alipay,
        union: res.shou_union,
        earnest_amount: res.shou_earnest_amount,
        card: res.shou_card,
        transfer: res.shou_transfer,
        other: res.shou_other
      });
      list.value.push({
        name: '支出',
        cash: res.zhi_cash,
        wechat: res.zhi_wechat,
        alipay: res.zhi_alipay,
        union: res.zhi_union,
        earnest_amount: res.zhi_earnest_amount,
        card: res.zhi_card,
        transfer: res.zhi_transfer,
        other: res.zhi_other
      });
      list.value.push({
        name: '合计',
        cash: res.cash,
        wechat: res.wechat,
        alipay: res.alipay,
        union: res.union,
        earnest_amount: res.earnest_amount,
        card: res.card,
        transfer: res.transfer,
        other: res.other
      });
      info.value.settle.total = 0;
      info.value.settle.total += Number(res.cash);
      info.value.settle.total += Number(res.wechat);
      info.value.settle.total += Number(res.alipay);
      info.value.settle.total += Number(res.union);
      info.value.settle.total += Number(res.earnest_amount);
      info.value.settle.total += Number(res.card);
      info.value.settle.total += Number(res.transfer);
      info.value.settle.total += Number(res.other);
    });
  });

  const done = (form) => {
    actionFn(actionData.value, form, reloadTable);
  };
  const reloadTable = () => {
    tableRef.value.reload();
  };

  const reload = (val) => {
    val.create_start_time = val.start_time;
    val.create_end_time = val.end_time;
    let obj = { ...form2, ...val };
    form.filters = obj;
    get_statistics_list(form).then((res) => {
      console.log('res==', res);
      info.value = res;
      info.value.settle.real_amount2 = info.value.settle.real_amount;
      info.value.settle.discount_amount2 = info.value.settle.discount_amount;
      list.value = [];
      ('其他支付');
      list.value.push({
        name: '收款',
        cash: res.shou_cash,
        wechat: res.shou_wechat,
        alipay: res.shou_alipay,
        union: res.shou_union,
        earnest_amount: res.shou_earnest_amount,
        card: res.shou_card,
        transfer: res.shou_transfer,
        other: res.shou_other
      });
      list.value.push({
        name: '支出',
        cash: res.zhi_cash,
        wechat: res.zhi_wechat,
        alipay: res.zhi_alipay,
        union: res.zhi_union,
        earnest_amount: res.zhi_earnest_amount,
        card: res.zhi_card,
        transfer: res.zhi_transfer,
        other: res.zhi_other
      });
      list.value.push({
        name: '合计',
        cash: res.cash,
        wechat: res.wechat,
        alipay: res.alipay,
        union: res.union,
        earnest_amount: res.earnest_amount,
        card: res.card,
        transfer: res.transfer,
        other: res.other
      });
      info.value.settle.total = 0;
      info.value.settle.total += Number(res.cash);
      info.value.settle.total += Number(res.wechat);
      info.value.settle.total += Number(res.alipay);
      info.value.settle.total += Number(res.union);
      info.value.settle.total += Number(res.earnest_amount);
      info.value.settle.total += Number(res.card);
      info.value.settle.total += Number(res.transfer);
      info.value.settle.total += Number(res.other);
    });
  };
</script>
